<template>
  <div id="jobDetails" class="person-detail">
    <div>
      <van-nav-bar title="职位详情" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <div class="employmentTraining-shadow">
        <div class="employmentTraining-training-job bottom-line" @click="goDetails(item)">
          <p>
            <span class="employmentTraining-training-jobName">{{ jobs.subject }}</span>
          </p>
          <p> {{jobs.address}} | {{jobs.experienceNeedName}} | {{jobs.degreeNeedName}} </p>
          <p class="employmentTraining-training-salary"> {{jobs.salaryName}} </p>
        </div>
        <div class="jobDetails-training-company">
          <div class="employmentTraining-training-job">
            <p class="employmentTraining-training-jobName">{{ jobs.companyName }}</p>
            <p class="shadow-span">
              <span class="employmentTraining-training-address">{{jobs.scaleName}}</span>
              <span class="employmentTraining-training-address">{{jobs.categoryName}}</span>
              <span class="employmentTraining-training-address">{{jobs.industryType}}</span>
            </p>
            <p class="employmentTraining-training-address">地址:{{ jobs.address }}</p>
          </div>
          <div class="jobDetails-arrow">
            <svg-icon icon-class="箭头" widthW="1.5em" heightH="1.5em" class="icon-style" @click.native="
                $router.push({
                  path: '/work/employmentTraining/companyDetails',query:{id:jobs.companyId}
                })
              "></svg-icon>
          </div>
        </div>
      </div>
      <div class="jobDetails-details">
        <p>
          <span class="employmentTraining-training-jobName" style="font-size:18px;">职位详情</span>
        </p>
        <div class="jobDetails-training-address">
          <p>岗位职责</p>
          <p>{{ jobs.responsibility }}</p>
        </div>
        <div class="jobDetails-training-address">
          <p>岗位要求</p>
          <p>{{ jobs.requirement }}</p>
        </div>
      </div>
      <div class="jobDetails-duty">
        <p>
          <span class="employmentTraining-training-jobName" style="font-size:18px;">技能要求</span>
        </p>
        <p class="employmentTraining-training-address" style="margin-top:10px;">
          <span v-if="jobs.tags">
            <span v-for="(item, index) in jobs.tags.split(',')" :key="index">
              {{
              item
              }}
            </span>
          </span>
        </p>
      </div>
      <div class="mine-out">
        <van-button type="default" @click="confirm()">投递简历</van-button>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  export default {
    name: "jobDetails",
    components: {},
    data() {
      return {
        jobs: {}
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getInfo();
    },
    methods: {
      confirm() {
        let data = {
          positionId: this.jobs.id,
          status: 1
        };
        mine.training_positionApply(data).then(res => {
          if (res.code == "0") {
            this.$toast("投递成功");
          } else {
            this.$toast(res.msg);
          }
        });
      },
      getInfo() {
        let data = this.$route.query.id;
        mine.training_position(data).then(res => {
          this.isLoading = false;
          if (res.code == "0") {
            if (res.datas != null) {
              this.jobs = res.datas;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #jobDetails {
    background: #fff;

    p {
      margin: 0;
    }

    .employmentTraining-shadow {
      background: #ffffff;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.08);
      margin: 20px;
    }

    .big {
      font-size: 18px;
    }

    .employmentTraining-training-job {
      padding: 20px 20px 10px 20px;

      >p {
        height: 30px;
        line-height: 30px;
        width: 200px;
      }
    }

    .bottom-line {
      border-bottom: 1px solid #ccc;
    }

    .jobDetails-training-company {
      display: flex;
    }

    .employmentTraining-training-jobName {
      font-size: 16px;
      font-weight: bold;
      font-family: PingFangSC-Medium;
      color: #333333;
      letter-spacing: 0;
    }

    .jobDetails-arrow {
      float: right;
      line-height: 130px;
      padding-left: 50px;
      font-weight: 300;
    }

    .employmentTraining-training-salary {
      font-size: 14px;
      color: #dc4630;
    }

    .shadow-span {
      >span {
        background: #f5f5f5;
        margin-left: 10px;
        padding: 5px;
        border-radius: 1px;
        color: #888888;
        line-height: 20px;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .employmentTraining-training-address {
      color: #888888;

      >span {
        background: #f5f5f5;
        margin-left: 10px;
        padding: 5px;
        border-radius: 1px;
        color: #888888;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .jobDetails-details {
      padding: 10px 20px;
    }

    .jobDetails-training-address {
      font-size: 14px;
      font-weight: 300;

      >p:nth-child(1) {
        padding: 20px 20px 10px 0;
      }
    }

    .jobDetails-duty {
      padding: 0 20px 20px 20px;
    }

    .mine-out {
      padding: 50px 0;

      button {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
        font-size: 20px;
        color: #fff;
        letter-spacing: 0;
        text-align: center;
        background: #dc4630;
        border-radius: 20px;
      }
    }
  }
</style>